/**
 * Select
 * @author gf
 */

import { Select, SelectProps } from 'antd'
import styled from 'styled-components'

interface SelectWrapperProps extends SelectProps {
  iserror?: boolean // 用来校验为空时的样式
}

const SelectWrapper = styled.div`
  .ant-select {
    display: flex;
    align-items: center;
    margin-left: ${(props) => props.ml};
    width: ${(props) => props.minWidth || '236px'};
    .ant-select-selector {
      height: 28px;
      overflow: hidden;
      flex-wrap: nowrap;
      padding-right: 0 !important;
      line-height: 28px;
      border-color: ${(props) =>
        props.iserror ? '#E64A00' : '#D4D7DD'} !important;

      .ant-select-selection-overflow {
        flex-wrap: nowrap;
        overflow: overlay;
        .ant-select-selection-overflow-item {
          height: 24px;
        }
      }
      .ant-select-selection-item-content {
        color: #35425e !important;
      }
      .ant-select-selection-placeholder {
        color: rgba(53, 66, 94, 0.4);
      }
    }
  }
`

const SSelect = (props: SelectWrapperProps) => {
  const { iserror } = props
  const newProps = { ...props }
  delete newProps.iserror
  return (
    <SelectWrapper iserror={iserror}>
      <Select {...newProps} />
    </SelectWrapper>
  )
}

export default SSelect
